<template>
  <div
    style="
      width: 100%;
      height: calc(100% - 50px);
      position: relative;
      padding: 24px 32px;
      -webkit-box-sizing: border-box;
    "
  >
    <div
      style="
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        height: 100%;
        width: 100%;
        padding: 0px 12px;
        overflow-y: auto;
        overflow-x: hidden;
      "
    >
      <h3 style="text-align: left; margin-left: 24px">课程信息管理</h3>
      <div class="border"></div>

      <div
        style="
          text-align: left;
          margin: 0 24px;
          font-size: 12px;
          height: calc(100% - 72px);
        "
      >
        <!-- 查询，添加信息部分 -->
        <div style="width: 100%; margin-bottom: 24px">
          <!-- <el-form ref="form" :model="form" label-width="100px" style="align:center;padding-bottom:10px;font-size:12px;"> -->
          <!-- 添加信息按钮 -->
          <el-button
            @click="addRow()"
            class="filter-item"
            style="
              background-color: #cce2ff;
              color: gray;
              border: 0px;
              font-size: 12px;
            "
            type="success"
            icon="el-icon-edit"
          >
            添加
          </el-button>
          <el-button
            class="filter-item"
            style="
              background-color: #cce2ff;
              color: gray;
              border: 0px;
              float: right;
              font-size: 12px;
            "
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            查询
          </el-button>
          <el-time-select
            style="width: 20%; font-size: 12px; float: right"
            placeholder="请选择下课时间"
            v-model="form.course_endtime"
            :picker-options="{
              selectableRange: '06:30:00 - 23:30:00'
            }"
          >
          </el-time-select>
          <el-time-select
            style="
              width: 20%;
              margin-left: 10px;
              margin-right: 10px;
              font-size: 12px;
              float: right;
            "
            placeholder="请选择上课时间"
            v-model="form.course_starttime"
            :picker-options="{
              selectableRange: '06:30:00 - 23:30:00'
            }"
          >
          </el-time-select>
          <el-input
            v-model="form.course_id"
            placeholder="请输入课程编号"
            style="width: 20%; font-size: 12px; float: right"
          ></el-input>
          <!-- </el-form> -->
        </div>

        <!-- 表格 -->
        <!-- v-loading="listLoading" -->
        <div style="height: calc(100% - 117px); margin-bottom: 12px">
          <el-table
            :data="tableform"
            ref="tableform"
            border
            stripe="true"
            align="center"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              prop="course_id"
              label="课程编号"
              align="center"
              min-width="110"
            >
            </el-table-column>
            <el-table-column
              prop="course_name"
              label="课程名称"
              align="center"
              min-width="110"
            >
            </el-table-column>
            <el-table-column
              prop="course_starttime"
              label="上课时间"
              align="center"
              min-width="110"
            >
            </el-table-column>
            <el-table-column
              prop="course_endtime"
              label="下课时间"
              align="center"
              min-width="110"
            >
            </el-table-column>
            <el-table-column
              prop="opp"
              label="操作"
              align="center"
              min-width="110"
            >
              <template slot-scope="scope">
                <el-button
                  @click="handleEdit(scope.$index, scope.row)"
                  type="text"
                  >编辑</el-button
                >
                <el-button
                  @click="handleDelete(scope.$index, tableform)"
                  style="color: #f56c6c"
                  type="text"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          style="display: flex; justify-content: flex-end; margin-bottom: 12px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 添加信息页面 -->
    <div class="el-dialog">
      <el-dialog :title="title" :visible.sync="addFormVisible">
        <div
          style="
            width: 100%;
            height: 1px;
            background: #606266;
            margin-bottom: 24px;
          "
        ></div>
        <div style="margin: 12px 0 0 0px">
          <el-form ref="addFormRef" :rules="addFormRules" :model="addForm">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="课程编号"
                  label-position="right"
                  label-width="110px"
                >
                  <el-input
                    v-model="addForm.course_id"
                    autocomplete="off"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="课程名称"
                  label-position="right"
                  label-width="110px"
                >
                  <el-input
                    v-model="addForm.course_name"
                    autocomplete="off"
                    style="width: 80%"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="上课时间"
                  label-position="right"
                  label-width="110px"
                >
                  <el-time-select
                    style="width: 80%"
                    placeholder="请选择上课时间"
                    v-model="addForm.course_starttime"
                    autocomplete="off"
                    :picker-options="{
                      selectableRange: '06:30:00 - 23:30:00'
                    }"
                  >
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="下课时间"
                  label-position="right"
                  label-width="110px"
                >
                  <el-time-select
                    style="width: 80%"
                    placeholder="请选择下课时间"
                    v-model="addForm.course_endtime"
                    autocomplete="off"
                    :picker-options="{
                      selectableRange: '06:30:00 - 23:30:00'
                    }"
                  >
                  </el-time-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div style="display: flex; justify-content: flex-end">
              <el-button @click="sumbitAddRow()">确 定</el-button>
              <!-- <el-button type="info" @click="cancel()">取 消</el-button> -->
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!-- 编辑页面 -->
    <div style="margin-left: 50px">
      <el-dialog title="修改课程信息" :visible.sync="editFormVisible">
        <el-form :model="editForm" ref="editForm" style="margin-left: 100px">
          <p>课程编号</p>
          <el-form-item label="">
            <el-input
              v-model="editForm.course_id"
              autocomplete="off"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <p>课程名称</p>
          <el-form-item label="">
            <el-input
              v-model="editForm.course_name"
              autocomplete="off"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <p>上课时间</p>
          <el-form-item label="">
            <el-time-select
              style="width: 80%"
              placeholder="请选择上课时间"
              v-model="editForm.course_starttime"
              autocomplete="off"
              :picker-options="{
                selectableRange: '06:30:00 - 23:30:00'
              }"
            >
            </el-time-select>
          </el-form-item>
          <p>下课时间</p>
          <el-form-item label="">
            <el-time-select
              style="width: 80%"
              placeholder="请选择下课时间"
              v-model="editForm.course_endtime"
              autocomplete="off"
              :picker-options="{
                selectableRange: '06:30:00 - 23:30:00'
              }"
            >
            </el-time-select>
          </el-form-item>
          <el-form-item>
            <el-button
              style="background-color: #a69041; color: white; border: 0px"
              v-on:click="sumbitEditRow()"
              :loading="addLoading"
              >确 定</el-button
            >
            <el-button type="info" @click="cancel()">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 获取后台数据
import { getCourseList } from '@/api/table'
var _index //定义一个全局变量，以获取行数据的行号

export default {
  name: 'courseinfo',

  data() {
    return {
      addFormRules: {
        course_id: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ]
      },
      checked: true,
      tableform: [],
      title: '',
      // formLabelWidth: "120px",
      editFormVisible: false, //是否显示编辑窗口
      editForm: [],
      addFormVisible: false, //是否显示新增窗口
      addLoading: false,
      addForm: [],
      listLoading: true,

      // radio: 1,
      //日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      //搜索
      searchData: '',

      dialogFormVisible: false,

      form: {
        course_id: '',
        course_name: '',
        course_starttime: '',
        course_endtime: ''
      },

      tableform: [
        {
          num: '1',
          course_id: 'c001',
          course_name: '工程实训',
          course_starttime: '10:00',
          course_endtime: '12:00'
        },
        {
          num: '2',
          course_id: 'c001',
          course_name: '工程实训',
          course_starttime: '10:00',
          course_endtime: '12:00'
        },
        {
          num: '3',
          course_id: 'c001',
          course_name: '工程实训',
          course_starttime: '8:00',
          course_endtime: '12:00'
        }
      ]
    }
  },

  methods: {
    handleClick(row) {
      console.log(row)
    },
    tableRowStyle({ row, rowIndex }) {
      return 'height:2px;padding:1px 0'
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color:#425066;color:white;'
      }
    },

    //获取数据
    getData() {
      var url = '@/static/table.json'
      this.$http
        .get(url)
        .then((data) => {
          console.log(data)
          this.tableform = data.body
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //编辑数据
    handleEdit(index, row) {
      this.title = '编辑'
      this.addFormVisible = true
      this.addForm = Object.assign({}, row)
      // console.log(index)
      // console.log(_index)
      //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
    },
    //保存编辑
    sumbitEditRow() {
      // this.$ref.addFormRef.validator;
      var editData = _index
      alert('修改成功')
      this.tableform[editData].course_id = this.editForm.course_id
      this.tableform[editData].course_name = this.editForm.course_name
      this.tableform[editData].course_starttime = this.editForm.course_starttime
      this.tableform[editData].course_endtime = this.editForm.course_endtime

      this.editFormVisible = false
    },

    //新增数据
    addRow() {
      this.title = '新增'
      this.addFormVisible = true
      this.addForm = {
        course_id: '',
        course_name: '',
        course_starttime: '',
        course_endtime: ''
      }
    },
    //将新增的数据添加到表格中
    sumbitAddRow() {
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          alert('添加成功')
          this.tableform = this.tableform || []
          this.tableform.push({
            course_id: this.addForm.course_id,
            course_name: this.addForm.course_name,
            course_starttime: this.addForm.course_starttime,
            course_endtime: this.addForm.course_endtime
          })
          this.addFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.addFormVisible = false
      this.editFormVisible = false
    },
    //删除数据
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableform.splice(index, 1)
          //   storage.set("tableform", this.tableform);
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch((err) => {
          this.$message({
            type: 'error',
            message: err
          })
        })
    }

    // 从后台获取数据
    // fetchData() {
    //   this.listLoading = true
    //   getCourseList().then(response => {
    //     this.tableform = response.data.items
    //     this.listLoading = false
    //   })
    // }
  },

  mounted() {
    this.getData()
  },
  created() {
    this.fetchData()
  }
}
</script>

<style >
.border {
  width: 100%;
  height: 1px;
  background: #eeeeee;
  margin: 0 24px 12px 24px;
}
.el-dialog .el-dialog__body {
  padding-top: 0px !important;
}
</style>